<template>
  <div class="text">
    <div class="tittle">
        <h3>常用缴费</h3>
        <p>西安市 <van-icon name="location" /></p>
    </div>
    <ul class="tubiao">

            <li v-for="v in arr" :key="v.id">
                <img :src="v.img">
                <p>{{v.title}}</p>
            </li>

        </ul>

  </div>
</template>

<script>
export default {
    data(){
        return {
            arr:[
            {id:51111,"title":"本地手机话费","img":require("@/assets/index/jiaofei/jiaofei-0.jpg")},
            {id:51112,"title":"物业费","img":require("@/assets/index/jiaofei/jiaofei-1.jpg")},
            {id:51113,"title":"固定话费","img":require("@/assets/index/jiaofei/jiaofei-2.jpg")},
            {id:51114,"title":"IC卡","img":require("@/assets/index/jiaofei/jiaofei-3.jpg")},
            {id:51115,"title":"水费","img":require("@/assets/index/jiaofei/jiaofei-4.jpg")},
            {id:51116,"title":"电费","img":require("@/assets/index/jiaofei/jiaofei-5.jpg")},
            {id:51117,"title":"热力(暖气)","img":require("@/assets/index/jiaofei/jiaofei-6.jpg")},
            {id:51118,"title":"全部","img":require("@/assets/index/jiaofei/jiaofei-7.jpg")},
            ]
        }
    }

}
</script>

<style lang="scss" scoped>
    .text {
        width: 100%;
        margin-top: .3rem;
        margin-bottom: .3rem;
        .tittle {
            width: 90%;
            margin: auto;
            display: flex;
            justify-content: space-between;
            margin-bottom: .2rem;
        }
        ul{
            width: 90%;
            height: 2.05rem;
            margin: auto;
            border-radius: .05rem;
            background: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            >li {
                width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
                p {
                    font-size: .12rem;
                    margin-top: .1rem;
                }
            }
        }
    }

</style>